import getState from "@/api/state";
import Infocard from "@/template/infocard/infocard";
import ZuiEchart from "@/template/zuiEchart/zuiEchart";
import { getValFromList } from "@/utils/math";

import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import { useContext } from "react";

const Home2 = ({ condition }) => {
    const [message, setMessage] = useState("暂无数据");
    const [loading, setLoading] = useState(false)
    const [state1, setState1] = useState({
        "dayList": [
            // "2016", "2017", "2018", "2019", "2020", "2021"
        ],
        // 真实率 完整率
        "tooltipData": [
            {
                "name": "真实率",
                "value": [],//要么是空数组，要么是6个项的数组（没有的年份用0填充)
            },
            {
                "name": "完整率",
                "value": [],
            },
        ],
        "data": [
            {
                "name": "个人客户",
                "value": [],
            },
            {
                "name": "团体客户",
                "value": [],
            },

        ]
    })
    const [state2, setState2] = useState({
        "dayList": ["2022/01", "2022/02", "2022/03", "2022/04", "2022/05", "2022/06", "2022/07", "2022/08", "2022/09", "2022/10", "2022/11", "2022/12"],
        // 真实率 完整率
        "tooltipData": [
            {
                "name": "真实率",
                "value": [],
            },
            {
                "name": "完整率",
                "value": [],
            },
        ],
        "data": [
            {
                "name": "个人客户",
                "value": [],
            },
            {
                "name": "团体客户",
                "value": [],
            },
        ]
    })


    useEffect(() => {
        getState({
            apiUrl: "/cifgp-core-api/synt/trendMonthAndYear",
            state: state1,
            condition: { ...condition, cType: "syntinsNum", dateType: "tYear", statDate: condition.dateType === "tYear" ? condition.statDate : "" },
            setState: setState1,
            setLoading,
            setMessage,
        })
        getState({
            apiUrl: "/cifgp-core-api/synt/trendMonthAndYear",
            state: state2,
            condition: { ...condition, cType: "syntinsNum", dateType: "tMonth", statDate: condition.dateType === "tMonth" ? condition.statDate : "" },
            setState: setState2,
            setLoading,
            setMessage,
        })
    }, [condition])



    return (
        <>
            {/* 在保客户数量统计 */}
            <ZuiEchart
                message={message}
                authSwitch={true}
                loading={loading}
                condition={condition}
                style={{ width: "50%", height: "420px" }}
                btn={["年", "月"]}
                defaultModule="adBar"
                useXis
                addTooltip={true}  //添加自定义的tooltip
                data={[state1, state2]}
                title="在保客户数量"
                childrenPosition="top"
                keyWord={["yearInsureNumber", "lastInsureNumber"]} //把模块关键字传下去，给下载模块用。注意顺序，// btn keyWord data 它们顺序要一致。先传年，再传月

            >

                <Infocard
                    data={
                        [
                            {
                                title: "个人客户（当年）",
                                value: getValFromList(state1.data, "个人客户"),
                            },
                            {
                                title: "个人客户（当月）",
                                value: getValFromList(state2.data, "个人客户"),
                            },
                            {
                                title: "真实客户（当年）",
                                value: getValFromList(state1.data, "真实客户"),
                            },
                            {
                                title: "真实客户（当月）",
                                value: getValFromList(state2.data, "真实客户"),
                            }
                        ]
                    }
                />
            </ZuiEchart>
        </>
    )
}
export default Home2;